<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>19施俊哲用户注册</title>
</head>
<style>
    .tree{
        position: relative;
        top: 420px;
        left: 260px;
    }
/* 19施俊哲 */
    .contact_form{
        width: 70%;
        position: absolute;
        top: 20%;
        left: 35%;
    }
    .contact_form h2,.contact_form span{
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .contact_form ul{
        list-style: none;
        width: 750px;
        margin: 0px;
        padding: 0px;
    }

    .contact_form li{
        border-bottom: 1px solid #eee ;
        padding: 12px;
        position: relative;
    }

    .contact_form li:first-child,.contact_form li:last-child{
        border-bottom: 1px solid #777;
    }

    .contact_form h2{
        margin: 0;
    }

    .contact_form textarea{
        width: 300px;
    }

    .contact_form button{
        margin-left: 250px;
    }

    .spcial input{
        height: 15px;
        width: 40px;
        padding: 5px 8px;
    }

    .usually input,.usually textarea{
         background: #fff url(./0402/images/attention.png) no-repeat 98% center;
        border: 1px solid #aaa;
        box-shadow: 0px 0px 3px #ccc,0 10px 15px #eee inset;
        border-radius: 2px;
        transition: padding  .25s;
    }
    .usually input:focus,.usually textarea:focus{
        background: #fff;
        border: 1px solid #555;
        padding-right: 70px;
        box-shadow: 0 0 3px #aaa;
    } 

    button.submt{
        border-radius: 3px;
        background-color: #68b12f;
        background: linear-gradient(top,#68b12f,#50911e);
        border: 1px solid #5b992b;
        color: white;
        box-shadow: inset 0 1px 0 0 #9fd574;
        font-weight: bold;
        padding: 6px 20px;
        text-align: center;
        text-shadow: 0 -1px 0 #396715;
    }

    button.submit:hover{
        opacity: 85;
        cursor: pointer;
    }

    button.submit:active{
        border:1px solid #20911e;
        box-shadow: 0 0 10px 5px #356b0b inset;
    }

    .usually input:focus:invalid,.usually textarea:focus:invalid{
        background: #fff url(./0402/images/warn.png) no-repeat 98% center;
        box-shadow: 0 0 5px #d45252;
        border-color: #b03535;
    }

    .usually input:required:valid,.usually textarea:required:valid{
        background: #fff url(./0402/images/right.png) no-repeat 98% center;
        box-shadow:  0 0 5px #5cd053;
        border-color:  #5cd053;
    }
    
</style>
<body>
    <img class="tree" src="./0402/images/tree.jpg" alt="">
    <form class="contact_form" action="#">
        <ul>
            <li class="usually">
                <h2>用户注册</h2>
            </li>
            <li class="usually">
                <span>昵称:</span>
                <input type="text" id="name" name="name">
            </li>

            <li class="usually">
                <span>注册邮箱:</span>
                <input type="email" name="email" id="" placeholder="net55132105719@qq.com" required>
            </li>

            <li class="usually">
                <span>密码:</span>
                <input type="password" name="password" id="" required>
            </li>

            <li class="special">
                <span>性别:</span>
                <input type="radio" name="sex" id="male" checked>
                <lable for="male">男</lable>
                <input type="radio" name="sex" id="female">
                <label for="female">女</label>
            </li>
 
            <li class="usually">
                <span>年龄:</span>
                <input type="number" name="age" id="" required>
            </li>

            <li class="usually">
                <span>兴趣爱好:</span>
                <input type="checkbox" id="football" id="interest">
                <label for="football">足球</label>
                <input type="checkbox" id="baskball" id="interest">
                <label for="baskball">篮球</label>
                <input type="checkbox" id="swim" id="interest">
                <label for="swim">游泳</label>
                <input type="checkbox" id="sing" id="interest">
                <label for="sing">唱歌</label>
                <input type="checkbox" id="run" id="interest">
                <label for="run">跑步</label>
                <input type="checkbox" id="yoga" id="interest">
                <label for="yoga">瑜伽</label>
            </li>

            <li class="usually">
                <span>自我介绍:</span>
                <textarea name="introduction" id="" cols="200" rows="10" placeholder="请输入你的自我介绍" required></textarea> 
            </li>

            <li>
                <button class="submit" type="submit">立即注册</button>
            </li>
        </ul>
    </form>
</body>
</html>